<template>
	<view class="cardstyle" :style="{'background-color': bgColor}">
		<slot name="header"></slot>
		<view class="title-row" v-if="mode !== 3">
			<view class="img-container" v-if="mode === 2">
				<image :src="showImage" mode="aspectFill" @error="handleImageException()"></image>
			</view>
			<text class="titlebox">{{ title }}</text>
		</view>
		<view class="ad-row" v-if="mode === 3">
			<text class="titlebox">{{ title }}</text>
			<view class="multi-img-container">
				<image v-for="(img, idx) in images" :key="idx" :src="img" mode="aspectFill"
					@error="handleImageException()"></image>
			</view>
		</view>
		<view class="tipsbox">
			<text class="top-tag" v-if="isTop">置顶</text>
			<text class="author-text" :style="authorColor">{{ author }}</text>
			<text class="comment-text">{{ comments }}评</text>
			<text class="time-text" style="flex: 1; text-align: right;">{{ time }}</text>
		</view>
		<slot name="tips"></slot>
		<slot name="footer"></slot>
	</view>
</template>

<script>
	export default {
		name: "cardViewText",
		data() {
			return {
				defaultPic: "/static/logo.png",
				failPic: "/static/error.png",
				status: "news",
				imageError: false
			};
		},
		computed: {
			showImage() {
				const safeIndex = Math.min(this.imgindex, this.images.length - 1);
				if (this.images.length > 0) {
					if (this.imageError) {
						console.log("图片加载失败--> " + this.title);
						return this.failPic;
					}
					return this.images[safeIndex]; 
				} else {
					console.log("无图片默认占位--> " + this.title);
					return this.defaultPic;
				}
			},
			authorColor() {
				const colorMap = {
					news: "#aaa",
					ad: "#00f"
				};
				return {
					color: colorMap[this.status] || "#f33"
				};
			}
		},
		mounted() {
			console.log("卡片挂载--> " + this.title);
			if (this.mode == 3) {
				this.status = "ad";
			}
		},
		props: {
			bgColor: {
				type: String,
				default: "#fff"
			},
			imgindex: {
				type: Number,
				default: 0
			},
			images: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: "新闻标题",
				required: true
			},
			isTop: {
				type: Boolean,
				default: false,
				required: true
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			comments: {
				type: Number,
				default: 0,
				required: true
			},
			time: {
				type: String,
				default: "2025.1.1"
			},
			mode: {
				type: Number,
				default: 1,
				required: true
			}
		},
		methods: {
			handleImageException() {
				this.imageError = true;
			}
		}
	};
</script>

<style>
	.cardstyle {
		width: 690rpx;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.title-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.img-container {
		width: 160rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		flex-shrink: 0;
		margin-right: 20rpx;
		background: #f5f5f5;
	}

	.img-container image {
		width: 100%;
		height: 100%;
	}

	.ad-row {
		margin-bottom: 24rpx;
	}

	.multi-img-container {
		display: flex;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	.multi-img-container image {
		width: 30%;
		height: 120rpx;
		border-radius: 12rpx;
	}

	.titlebox {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.tipsbox {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}

	.top-tag {
		background-color: #ff3e3e;
		color: #fff;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
		font-size: 22rpx;
	}

	.author-text {
		margin-right: 20rpx;
	}

	.comment-text {
		margin-right: 20rpx;
	}
</style>